<template>
    <div class="Editor" ref="view"></div>
</template>

<script>

import * as monaco from 'monaco-editor'

import codeTheme from './theme.json'
import { initMonacoEditor } from "../libs/monacoEditor";
import { wire } from '../libs/monacoEditor'

export default {
    name: 'App',
    props: ['value'],
    data() {
        return {
            monacoEditor: null,
            Code: '',
        }
    },
    mounted() {
        this.initEditor()
    },
    watch: {
        value(val) {
            this.monacoEditor.setValue(val);
        }
    },
    methods: {
        async initEditor() {
            monaco.editor.defineTheme('vs-dark', codeTheme)
            monaco.editor.setTheme('vs-dark')
            try {
                await initMonacoEditor();
            } catch (error) {

            }
            this.monacoEditor = monaco.editor.create(this.$refs.view, {
                theme: 'vs-dark',
                readOnly: false,
                automaticLayout: true
            });
            monaco.editor.setModelLanguage(this.monacoEditor.getModel(), 'html');
            wire('vue2', this.monacoEditor);
            this.monacoEditor.setValue(this.Code);
        },
        getCode() {
            return this.monacoEditor.getValue();
        },
        setCode(val) {
            this.Code = val;
            this.monacoEditor && this.monacoEditor.setValue(val);
        }
    }
}
</script>

<style lang="less">
.Editor {
    width: 100%;
    height: 100%;
}
</style>
